屬性區主要用來查看和調整物件的屬性，還可以在此設計 Prototype 、匯出檔案和查看 Dev Code 等進階功能，本章將一一介紹屬性區的功能。

屬性區頂部有兩個選項可切換：

1. 設計 Design
2. 互動原型 Prototype

設計 Design

預設的設計面版，在未選取任何物件時，可查看畫布本地的樣式，還可以變更背景填色 Background。
設計面板會根據你所選擇的物件屬性，展開對應的設置面板（如下圖），由上往下有：

(以 Frame 物件為例）

• 對齊工具：控制物件之間對齊和分佈的選項
• 框架選單工具：設定尺寸、方向、和位置等
• Auto Layout：在元素間定義其關聯性
• Layout grid：可根據選定的區域去設定隔線佈局
• Layer：控制圖層隱藏或顯示，可調整透明度和有19種混合模式供選擇
• Fill：填滿工具，可自由設定顏色或引入資源庫資料
• Stroke：框線工具，可自由設定線條粗細、顏色和定義其他數值，也可引入資源庫資料
• Selection Colors：若選定的圖層有使用資料庫定義的顏色，將會顯示在此區
• Effects：可設定陰影、光暈等圖層效果
• Export：導出所選擇的物件

互動原型 Prototype

切換至 Protoype 面板將進入設定互動原型模式，設計師透過連接各個框架建立交互設計來模擬使用者可能的使用流程，互動原型的面版包含以下工具

• Flow starting point：設定流程起始點並命名
• Interactions：設定交互方式和動作
• Scroll behavior：滑動模式選項

過往與前端工程師合作的經驗中， Export 導出功能是我們常常被問怎麼使用的問題，
在下一章節中我們將會進行詳細的介紹。